<template>
    <header class="head-nav">
        <el-row>
            <el-col class="user">
               <i class="fa fa-margin fa-th-list menu"></i>
                <div class="head-nav-title">
                    <marquee><span>大队“双随机、一公开”监督</span></marquee>
                </div>
                <div class="userinfo">
                    <!-- <img :src="user.avatar" class='avatar' alt=""> -->
                     <div class='welcome'>
                      
                        <p class='name avatarname'>
                           <i class="fa fa-margin fa-user-circle-o" style="color:#999"></i>
                           锡林郭勒盟消防支队苏尼特左旗大队
                        </p>
                    </div>
                    <span class='username'>
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                <i class="fa fa-margin fa-sign-in logout">退出</i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item  command='logout'>退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                     </span>
                </div>
            </el-col>
        </el-row>
    </header>
</template>
<script>
export default {
  name: "head-nav",
  computed: {
  },
  methods: {
    logout() {
      this.$router.push("/login");
    }
  }
};
</script>

<style scoped>
.head-nav {
  height: 60px;
  box-sizing: border-box;
  color: #fff;
  float: right;
  left: 180px;
  width: calc(100% - 180px);
}
/* .logo-container {
  line-height: 60px;
  min-width: 400px;
} */
.logo {
  height: 50px;
  width: 50px;
  margin-right: 5px;
  vertical-align: middle;
  display: inline-block;
}
.head-nav-title {
  font-weight: bolder;
  font-size: 25px; 
  color: #409eff;
  overflow: hidden;
}
marquee {
  width: 200px;
}
.user {
  line-height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  min-width: 400px;
}
.menu {
  color: black;
  padding: 20px;
  font-size: 20px;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  vertical-align: middle;
  display: inline-block;
}
.welcome {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  padding: 0 5px;
}
.name {
  line-height: 20px;
  text-align: center;
  font-size: 14px;
}
.comename {
  font-size: 12px;
}
.avatarname {
  color: black;
  font-weight: 500;
  font-size: 18px;
  margin-right: 20px;
}
.username {
  cursor: pointer;
  margin-right: 5px;
}
.logout{
 color:#409eff;
 font-size:18px;
 margin-right: 20px;
}
.el-dropdown {
  color: #fff;
}
</style>
